<template>
<div style="background-color: white; height:100%; border-radius:15px" >
    <div class="topic">
        <div class="topic-left">
            <div class="button-back" @click="Close" >关闭</div>
            <div class="shop-id"> {{ shop.id }}  </div>
            <div class="shop-name">{{ shop.name }}</div>
            <div class="shop-area"> 第{{ arm_area_idx }}号防区</div>
        </div>
        <div class="topic-right">
            <span class="" >防区状态：</span> <span>{{ ShowArmAreaStatus() }}</span> 
        </div>
        <div class="topic-padding">
        </div>
    </div>
    <div class="body" >
        <div class="right-info" >
            <h2>防区信息</h2>
            <p>
                IP: {{protector.ip}}
            </p>
            <p>
            MAC: {{protector.mac}}
            </p>
            <p>
            主机类型: {{ protector.detail ? protector.detail.type: null }}
            </p>
            <p>
            防区号: {{ arm_area_idx }}
            </p>
            <p>
            当前状态: {{ ShowArmAreaStatus( ) }}
            </p>
            <p>
            开始时间:  {{ stamp }}
            </p>
            <div>
                <ul class="list-group">
                    <li class="list-group-item" v-for="channel in channels" @click="playChannel( channel )">
                        <button>
                            {{ channel }}
                        </button>
                    </li>
                </ul>
                <button @click="testNVR">
                    测试401 nvr 按钮
                </button>
            </div>
        </div>
        <div class="left-video">
            <div id="rtspvideo" class="plugin" >
            </div>
        </div>
    </div>
    <div class="clear-both">
    </div>
</div>
</template>

<style scoped>
.clear-both{
    clear:both;
}
.button-back{
    width: 100px;
    height: 50px;
    font-size: 30px;
    border-radius: 10px;
    background-color: #aaa;
    text-align: center;
    padding-top: 10px;
}
.topic{
    margin:0px;
    width: 100%;
    height:100x;
    padding-top:19px;
    padding-bottom: 19px;
}
.topic-padding{
    height: 138x;
    min-height: 100px;
}
.topic-left{
    margin: 17px 20px;
    float: left;
    line-height: 100%;
}
.topic-left > div{
    display:inline-block;
    margin: 0 20px;
    line-height: 100%;
    font-size: 30px;
}

.topic-right{
    margin: 17px 20px;
    float: right;
    font-size: 30px;
}

.topic-right > div{ 
    display: inline-block;
}

.body{ 
    width: 100%;
}
.left-video{
    float: left;
    margin:0px;
    background-color: #ddd;
}
.left-video video{ 
    width: 100%;
}
.right-info{ 
    float:right;
    width: 300px;
    text-align: center;
    background-color: #aaddff
}

.flex-control{
    margin: auto;
    width: 360px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.flex-button{
    border-radius:20px;
    font-size: 20px;
    height: 40px;
    min-width: 120px;
    margin: 20px;
}
</style>

<script>
import axios from 'axios'
import bus from './bus'
import { initHikvision, clickLogin, clickGetChannels, clickStartRealPlay, clickStartPlayback } from '@/common/hikvision'

export default{ 
    name: "armarea",
    data(){
        return {
            protector:{},
            shop: {}, 
            arm_area_idx: null,
            arm_area_status: null,
            channels:[],
            stamp: 0,
        }
    },
    methods: {
        playVideo( shop, protector, arm_area_idx, channels, stamp ) {
            console.log( "stamp: ", stamp );
            this.$data.shop = shop;
            //work around 
            if( !shop.arm_areas[arm_area_idx]){
                arm_area_idx = Object.keys( shop.arm_areas )[0];
            }
            this.$data.protector = protector;
            this.arm_area_idx = arm_area_idx;
            this.stamp = !stamp ? 0: stamp;
            this.channels = channels;

            var channel = channels[0];

            var channel_parts = channel.split( "#");

            this.ip = channel_parts[0];
            this.channelID = parseInt( channel_parts[1] );

            var nvr = this.shop.nvrs[this.ip];

            var ip = this.ip;
            var channelID = this.channelID;

            console.log( "-------- play video -----------");
            console.log( "ip:       ", ip );
            console.log( "port:     ", nvr.port);
            console.log( "username: ", nvr.username);
            console.log( "password: ", nvr.password);

            var start_stamp = stamp;
            console.log( 'click start play back ----!!! ', start_stamp );
            var sStamp = new Date( Number( start_stamp ) ).toISOString();
            console.log( "sStamp : ", sStamp)
            var sDate = sStamp.split( "T" )[0];
            var sTime = sStamp.split( "T" )[1].split( ".")[0];
            var start_str = sDate + " " + sTime;
            console.log( "start_str: ", start_str );
            

            sStamp = new Date(  Number( start_stamp ) + (3600 * 1000) ).toISOString();
            sDate = sStamp.split( "T")[0];
            sTime = sStamp.split( "T" )[1].split( "." )[0];
            var end_str = sDate + " " + sTime;
            /*
            console.log( 'end_str: ', end_str );
            console.log( "click start play back ");
            console.log( "channelID: ", channelID );
            console.log( "stamp: " , stamp);
            */

            clickLogin( ip, nvr.port, nvr.username, nvr.password ).then( ( data ) => { 
                if( stamp ){
                    clickStartPlayback( ip, channelID, start_str, end_str  );
                }
                else {
                    console.log( "click start real play");
                    clickStartRealPlay( ip, channelID );
                }
            });
        },

        playChannel( channel ){
            var channel_parts = channel.split( "#");
            this.ip = channel_parts[0];
            this.channelID = parseInt( channel_parts[1] );
            var nvr = this.shop.nvrs[this.ip];

            clickLogin( this.ip, nvr.port, nvr.username, nvr.password ).then( ( data ) => { 
                console.log( "click start real play ");
                if( this.stamp ){

                    var start_stamp = this.stamp;
                    var sStamp = new Date( Number( start_stamp ) ).toISOString();
                    var sDate = sStamp.split( "T" )[0];
                    var sTime = sStamp.split( "T" )[1].split( ".")[0];
                    var start_str = sDate + " " + sTime;
                    
        
                    sStamp = new Date(  Number( start_stamp ) + (3600 * 1000) ).toISOString();
                    sDate = sStamp.split( "T")[0];
                    sTime = sStamp.split( "T" )[1].split( "." )[0];
                    var end_str = sDate + " " + sTime;

                    clickStartPlayback( ip, channelID, start_str, end_str )
                }
                else {
                    clickStartRealPlay( this.ip, this.channelID );
                }
            });
        },

        Close(){
            window.parent.window.videoBus.$emit( "CloseArmArea", null );
        },

        testNVR(){
            clickLogin( '192.168.1.150', 80, 'admin', 'admin1234' ).then( ()=> {
                clickStartRealPlay( '192.168.1.150',  4 );
            });
        },

        ShowArmAreaStatus( s ) { 
            console.log( this.protector );
            var s ;
            if( this.arm_area_idx && this.protector.arm_areas[this.arm_area_idx]){
                s = this.protector.arm_areas[this.arm_area_idx].s;
            }
            if( s == "c")
                return "撤防";
            else if( s == "b")
                return "布防";
            else if( s == 'a'){
                return "报警";
            }
            else 
                return "未知"
        },
    },

    created(){
    },

    mounted(){
        console.log( "------------------  arm area video mounted" ) ;
        console.log( document.getElementById( "rtspvideo"))
        initHikvision( 'rtspvideo' )
        var vm = this;
        bus.$on( "PlayVideo", function( { shop, protector, arm_area_idx, channels, stamp }){ 
            console.log( "iframe on playVideo event: ");
            console.log( shop, protector, arm_area_idx, channels, stamp )
            vm.playVideo(shop, protector, arm_area_idx, channels, stamp );
        });
    },
}
</script>